<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/23
  Time: 13:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.js" charset="utf-8"></script>
<script src="/js/common.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
<h1 style="margin-bottom: 20px;">用户管理</h1>
    <input id="pageType" value="${pageType}" style="display: none">
    <!-- 表单区+返回按钮 -->
    <div style="background-color: white;">
        <div class="layui-row">
            <!-- 返回按钮 -->
            <div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
                <a href="/jsp/userManage/userManage.jsp" class="layui-btn layui-btn-sm layui-btn-normal">
                    <i class="layui-icon layui-icon-left">返回</i>
                </a>
            </div>
        </div>
        <!-- 蓝色分割线 -->
        <hr class="layui-bg-blue">
        <form id="frm_user" class="layui-form layui-form-pane" action="" style="padding-left: 110px;">

            <input name="user_id" value="${userVo.user_id}" style="display: none">
            <!-- 第一排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input id="user_name" name="user_name" required  lay-verify="required|username" value="${userVo.user_name}" autocomplete="off" class="layui-input" onchange="queryUserByName(this.value)">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input name="telephone" value="${userVo.telephone}" lay-verify="phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!-- 第二排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">真实姓名</label>
                    <div class="layui-input-block">
                        <input name="real_name" required  lay-verify="required|realname" value="${userVo.real_name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">Email</label>
                    <div class="layui-input-block">
                        <input name="email" value="${userVo.email}" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!-- 第三排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input name="address" value="${userVo.address}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">学历</label>
                    <div class="layui-input-block">
                        <select id="slt_education" name="education" lay-search required lay-verify="required" value="${userVo.education}">
                            <option value="">请选择</option>
                            <c:forEach var="item" items="${education}">
                                <option value="${item.dictionary_fieldValue}">${item.dictionary_value}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 第四排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">毕业院校</label>
                    <div class="layui-input-block">
                        <input name="user_school" value="${userVo.user_school}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-block">
                        <input name="idcard" required  lay-verify="required identity" value="${userVo.idcard}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!-- 第五排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">银行账号</label>
                    <div class="layui-input-block">
                        <input name="bankcard" value="${userVo.bankcard}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-block">
                        <select id="slt_dept_id" name="dept_id" lay-search lay-verify="required" lay-filter="chooseDept" value="${userVo.dept_id}">
                            <option value="">请选择</option>
                            <c:forEach var="item" items="${dept}">
                                <option value="${item.dept_id}">${item.dept_name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 第六排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <select id="slt_sex" name="sex" lay-search lay-verify="required" value="${userVo.sex}">
                            <c:forEach var="item" items="${sex}">
                                <option value="${item.dictionary_fieldValue}">${item.dictionary_value}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">职位</label>
                    <div class="layui-input-block">
                        <select id="slt_position" name="position_id" lay-search lay-verify="required" value="${userVo.position_id}">
                            <option value="">请选择</option>
                            <c:forEach var="item" items="${position}">
                                <option value="${item.position_id}">${item.position_name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 第七排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <select id="slt_role" name="role_id" lay-search lay-verify="required" value="${userVo.role_id}">
                            <option value="">请选择</option>
                            <c:forEach var="item" items="${role}">
                                <option value="${item.role_id}">${item.role_name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">工资</label>
                    <div class="layui-input-block">
                        <input name="salary" required  lay-verify="required|number" value="${userVo.salary}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!-- 第八排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-block">
                        <input id="ipt_hire_time" name="hire_time" required  lay-verify="required" value="${userVo.hire_time}" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">皮肤</label>
                    <div class="layui-input-block">
                        <select id="slt_theme_skin" name="theme_skin" lay-search lay-verify="required" value="${userVo.theme_skin}">
                            <option value="">请选择</option>
                            <c:forEach var="item" items="${theme_skin}">
                                <option value="${item.dictionary_fieldValue}">${item.dictionary_value}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 功能按钮 -->
            <div class="layui-form-item" style="padding: 15px 0;">
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="submitBtn">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script>

    $(function () {

        showDefaultSelected();
    });

    //form模块
    layui.use(['form','laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;

        //laydate模块
        laydate.render({elem: '#ipt_hire_time'});

        //form模块
        //监听提交
        form.on('submit(submitBtn)', function(data){

            var pageType = $("#pageType").val();//获取页面类型：1-修改
            if (pageType == 1){

                $("#frm_user").attr("action","/userManage/updateUserById.do");
            }else {

                $("#frm_user").attr("action","/userManage/addUser.do");
            }
            return true;
        });
        //部门下拉框监听事件，data为被选中的选项
        form.on("select(chooseDept)",function (data) {

            //部门id
            var dept_id = data.value;
            //如果部门id不为空，发送异步请求查询部门职位
            if(dept_id != ""){
                $.ajax({
                    url:"/loginController/getPositionListByDeptId.do",
                    data:{
                        dept_id:dept_id
                    },
                    dataType:"json",
                    success:function (result) {//获得部门职位数组
                        //清空职位下拉框
                        $("#slt_position").html("<option value=''>请选择</option>");
                        //循环部门职位
                        for (i in result){

                            $("#slt_position").append("<option value='"+result[i].position_id+"'>"+result[i].position_name+"</option>");
                        }
                        //重新渲染表单
                        form.render();
                    }
                });
            }else {
                //如果部门id为空，清空职位下拉框
                $("#slt_position").html("<option value=''>请选择</option>");
                //重新渲染表单
                form.render();
            }
        });

        //form验证
        form.verify({
            username: function(value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[0-9a-zA-Z]+$").test(value)) {
                    return '用户名只能由英文和数字组成';
                }
            },
            realname: function(value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z\u4e00-\u9fa5]+$").test(value)) {
                    return '真实姓名只能存在中文和英文字母';
                }
            }
        });
    });

    /**
     * 通过用户名查询用户
     * @param user_name
     */
    function queryUserByName(user_name) {

        $.ajax({
            url:"/userManage/queryUserByName.do",
            data:{
                user_name:user_name
            },
            dataType:"json",
            success:function (result) {

                if(result.code == 500){
                    layer.msg("用户名已存在！");
                    //清空输入框
                    $("#user_name").val("");
                }
            }
        });
    }

</script>
</html>
